<template>
  <div class="approval-main">
    <div class="affix">
      <div class="top-btn">
        <ApprovalUserListDialog
          ref="approvalUserListDialog"
          @confirm="submitConfirm"></ApprovalUserListDialog>
        <el-button
          size="small"
          icon="el-icon-search"
          @click="submit">提交
        </el-button>
        <el-button
          size="small"
          v-for="(item,index) in buttonList"
          :key="index"
          :type="item.type"
          :icon="item.icon"
          @click="item.func">{{ item.name }}
        </el-button>
      </div>
    </div>
    <div class="approval-form">
      <slot></slot>
    </div>
    <CommentDialog ref="commentDialog" :taskId="taskId" @confirm="confirm"></CommentDialog>
    <Todo ref="todo" ></Todo>
    <BpmViewDialog ref="bpmViewDialog"></BpmViewDialog>
  </div>
</template>
<script>
    import CommentDialog from './CommentDialog'
    import ApprovalUserListDialog from './ApprovalUserListDialog'
    import {startProcessInstanceByKey} from '@/api/Process'
    import {getButtonList,getProcessInstanceIdByBusinessId} from '@/api/Task'
    import Todo from './Todo'
    import BpmViewDialog from './BpmViewDialog'

    export default {
      name:'CommonApproval',
        components: {
            BpmViewDialog,
            Todo,
            ApprovalUserListDialog,
            CommentDialog
        },
        provide: function () {
            return {
                getTaskId: this.getTaskId,
                getProcessInstanceId: this.getProcessInstanceId,
              buttonList:{
                agree:this.agree,
                reject:this.reject,
                history:this.history,
                flowImage:this.flowImage
              }
            }
        },
        data() {
            return {
                taskId: 'a352fa3c-8d7b-11eb-bd5c-68f728e8bafc',
                processInstanceId: 'a2fb6448-8d7b-11eb-bd5c-68f728e8bafc',
                listData: []
            }
        },
        computed: {
            buttonList() {
                return this.listData.map(x => {
                    return {
                        name: x.name,
                        func: this[x.func],
                        type: 'primary',
                        icon: 'el-icon-search'
                    }
                })
            }
        },
        methods: {
            //同意
            agree() {
                this.$refs.commentDialog.open('agree')
            },
            //驳回
            reject() {
                this.$refs.commentDialog.open('reject')
            },
            //审批历史
            history() {
                this.$refs.todo.open(this.processInstanceId)
            },
            //流程图
            flowImage() {
                this.$refs.bpmViewDialog.open(this.processInstanceId)
            },
            confirm(userList) {
                console.log(userList)
            },
            getTaskId() {
                return this.taskId
            },
            getProcessInstanceId() {
                return this.processInstanceId
            },
            submit() {
                this.$refs.approvalUserListDialog.open('processDefinitionKey','eflow_1')
            },
            submitConfirm(userList) {
                startProcessInstanceByKey('eflow_1',userList, '123456', '测试发起流程【66666】', {id: 222, name: '张三'}).then(res => {
                    console.log(res)
                })
            }
        },
        created() {
          getButtonList(this.taskId).then(res=>{
            this.listData = res.data
          })
        }
    }
</script>
<style scoped lang="scss">
    .approval-main {
        .affix {
            height: 40px;
            width: 100%;

            .top-btn {
                padding: 5px 5px;
                width: 100%;
                position: fixed;
                background-color: #fff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                z-index: 20;
            }
        }

        .approval-form {
            padding: 5px;
        }
    }

</style>
